<template>
	<view class="" style="background-color: #F8F8F8; min-height: 100%;">
		<u-no-network></u-no-network>
		<!-- #ifndef APP-PLUS -->
		<u-navbar title="我的订单" title-color='black' background-color='white' :title-bold="true">
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<u-navbar title="我的订单" height="80" title-color='black' background-color='white' :title-bold="true">
		</u-navbar>
		<!-- #endif -->

		<view class="u-skeleton">
			<view class="ml30 mr30" style="padding-top: 40rpx;" v-if="loadingSkeleton">
				<view class="" v-for="item in 4">
					<view class="u-skeleton-fillet h-skeleton mt20" style="width: 300rpx;"></view>
					<view class="u-skeleton-fillet h-skeleton mt20"></view>
					<view class="u-skeleton-fillet mt20" style="height: 200rpx;"></view>
				</view>
			</view>
		</view>
		<view class="">
			<u-tabs-swiper ref="tabs" :list="tabsList" :current="current" :offset="[-2,0]" :is-scroll="false"
				bar-height="6" bar-width="60" active-color="#47A848" @change="tabsChange">
			</u-tabs-swiper>

		</view>
		<view class="mt20  ml20 mr20 ">
			<swiper @change="change" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish" :style="{'height': scrollHeight}">
				<swiper-item class="swiper-item" v-for="(item1, index1) in tabs" :key="index1" style="height: 100%;">
					<scroll-view @refresherrefresh="refresherrefresh(index1)" refresher-enabled
						:refresher-triggered="item1.refresherTriggered" class="scroll-content-container" scroll-y
						@scrolltolower="onreachBottom" style="width: 100%;" :style="{'height': scrollHeight}">
						<view class="">
							<view class="df aic jcc" v-if="item1.dataSet&&item1.dataSet.length==0"
								:style="{'height': scrollHeight}">
								<view class="tac">
									<image style="width: 428rpx;" src="../../static/empty/order-empty.png"
										mode="widthFix"></image>
									<view class="fs28 c6 mt16 mb20">
										没有找到订单~
									</view>
									<u-button :custom-style="customStyle" @click="jumpDetail(item,'indexPage')"
										class="mr16" shape="circle" size="mini">去首页逛逛</u-button>
								</view>
							</view>

							<view v-else style="overflow: hidden;">
								<view class=" bgcf mb20 bdr20" v-for="(item,index) in item1.dataSet" :key="index">
									<!-- 店铺信息 -->
									<view class="df aic jcsb p30">
										<view class="df aic" @click="shopUrlTab(item)">
											<u-image
												src="https://zhaimeibianli.oss-cn-hangzhou.aliyuncs.com/house/2023/12/08/f4989a5873484230b793d370000ed5f0.png"
												mode="" shape="circle" class="u-skeleton-fillet" height="40"
												width="40"></u-image>
											<text class="ml20 store u-skeleton-fillet">{{item.purCode}}</text>
										</view>
										<!--  -->
										<view class="state" v-if="swiperCurrent==4&&item.busType==1" :style="{
											'color': item.auditStatus == 1 ? '#EF2929' : 
											item.auditStatus == '2' ? '#48A147' : '#999'
										}">
											{{item.auditStatus==0?'待审核':item.auditStatus==1?'待支付':'已完成'}}
										</view>
										<view class="state" v-else-if="swiperCurrent==4&&item.busType==2" :style="{
											'color': item.auditStatus == 1 ? '#EF2929' : 
											item.auditStatus == '3' ? '#48A147' : '#999'
										}">
											<text v-if="item.auditStatus==3">已完成</text>
											<text v-else-if="item.auditStatus==-3||item.auditStatus==-4">拒绝</text>
											<text v-else>审核中</text>
										</view>
										<view class="state" v-else :style="{
											'color': item.auditStatus == 1 ? '#EF2929' : 
											item.auditStatus == '30' ? '#48A147' : 
											item.auditStatus == '0' ? '#48A147' : 
											(item.auditStatus == '-1'||item.auditStatus == '-3') ? '#999' :
											item.auditStatus == '20' ? '#48A147' : '#1A44EB'
										}">
											{{item.auditStatus==0?'预约单':item.auditStatusName || '---'}}
										</view>
									</view>
									<u-line color="#E5E5E5"></u-line>
									<!-- 商品信息 -->
									<!-- :class="item.shopPurOrderDetail.length>1?'bgce p20':''" -->
									<template v-if="item.shopPurOrderDetail.length > 1">
										<scroll-view scroll-x style="width: 680rpx;">
											<view class="df aic bdr10 p20 pb10">
												<view class="mr20" v-for="img in item.shopPurOrderDetail">
													<u-image :src="img.image" mode="" border-radius="10" width="140"
														height="140"
														style="width: 140rpx;height: 140rpx;border-radius: 10rpx;"
														class="u-skeleton-fillet  bdr10"></u-image>
												</view>
											</view>
										</scroll-view>
									</template>
									<view class="df aic bdr10 p20 pb10" v-else>
										<view class="">
											<view class="df">
												<view class="">
													<u-image width="120rpx" height="120rpx" border-radius="10"
														:src="item.shopPurOrderDetail[0].image"
														class="u-skeleton-fillet bdr10"></u-image>
												</view>
												<view class="ml20 " style="width: 400rpx; ">
													<view class="textOver2 df aic u-skeleton-fillet">
														<text class="ml10 fs26 fwb"
															style="vertical-align: top">{{item.shopPurOrderDetail[0].customGoodsName}}</text>
													</view>
													<view style="display: inline-block;"
														class=" c6 fs24  u-skeleton-fillet mt10">
														{{item.shopPurOrderDetail[0].specName}}
													</view>
													<view class="dtsb  u-skeleton-fillet mt10" v-if="swiperCurrent==4">
														支持多退少补
													</view>
												</view>
												
												<view class="u-skeleton-fillet left-box  df jcsb">
													<view class="priceBox">
														<span class="fs24">¥</span>
														<span
															class="fs30 price">{{item.shopPurOrderDetail[0].platformPrice || '待报价'}}</span>
													</view>

													<view class="c3 fs24" v-if="swiperCurrent!=4">
														×{{item.shopPurOrderDetail[0].saleNum}}
													</view>
													<view class="c3 fs24" v-if="swiperCurrent==4">
														<span v-if="item.auditStatus==-3||item.auditStatus==-4">×{{item.shopPurOrderDetail[0].saleNum}}</span>
														<span v-else>×{{item.shopPurOrderDetail[0].initSaleNum}}</span>
													</view>

												</view>
											</view>
										</view>


									</view>
									<view class="desc-dtsb ml20" v-if="(swiperCurrent==4||swiperCurrent==3)&&item.shopPurOrderDetail.length==1">
										实际出货
										<span v-if="item.auditStatus==-3||item.auditStatus==-4">
											{{item.shopPurOrderDetail[0].saleNum||0}}
										</span>
										<span v-else>
											{{item.shopPurOrderDetail[0].initSaleNum||0}}
										</span>
										{{item.shopPurOrderDetail[0].saleUnit||0}},已送货单为准
									</view>
									<view class="u-skeleton-rect p020">

										<view class="df aic jcsb mb10" style="height: 50rpx;">
											<view class="df jcfe" style="margin-left: auto;">
												<view class="all  u-skeleton-fillet">
													共{{item.shopPurOrderDetail.length||0}}种商品，金额：
												</view>
												<view class="priceBox" v-if="swiperCurrent==4">
													<span class="fs24">¥</span>
													<span class="fs30 price">{{item.platformMoney}}</span>
												</view>
												<view class="priceBox" v-else>
													<span class="fs24">¥</span>
													<span class="fs30 price">{{item.payMoney || '待报价'}}</span>
												</view>
											</view>
										</view>
										<u-line color="#E5E5E5" border-style="dashed" margin="20rpx 0 0 20rpx"></u-line>
									</view>
									<!-- 操作按钮 -->
									<view class="df aic jcfe p20">
										<!-- 只有退款状态下 -->
										<view class="desc-dtsb" v-if="swiperCurrent==4">
											<view class="">
												<text v-if="item.optType==1&&item.auditStatus!=-3&&item.auditStatus!=-4">
													退款金额：¥{{item.changePlatformMoney||0}}
												</text>
												<text v-if="item.optType==2">
													补差价金额：¥{{item.changePlatformMoney||0}}
												</text>
												<text v-if="item.optType==3">
													无需操作
												</text>
											</view>
											<view class="c6" v-if="item.auditStatus==2">
												<text v-if="item.optType==1">
													已支付路径原路退回
												</text>
												<text v-if="item.optType==2">
													已通过微信支付完成
												</text>
											</view>
										</view>
										<view class="" v-if="item.optType==2&&item.auditStatus==1&&swiperCurrent==4">
											<u-button @click="handlesubmitLess(item)" class="mr16" shape="circle"
												size="mini">补差价(<text>￥{{item.changePlatformMoney||0}}</text>)</u-button>
										</view>
										<template v-if="swiperCurrent!=4">
											<view class="">
												<u-button v-if="item.auditStatus == 1" :loading="loading" class="mr16"
													shape="circle" size="mini" type="error"
													@click="handlesubmit(item)">立即付款</u-button>
											</view>
											<!-- 	<u-button :custom-style="customStyle" @click="jumpDetail(item,'del')"
												class="mr16" shape="circle" size="mini">再来一单</u-button> -->
											<view class="" v-if="item.auditStatus == '-1'  ">
												<u-button @click="jumpDetail(item,'del')" class="mr16" shape="circle"
													size="mini">删除订单</u-button>
											</view>
											<u-button v-if="item.auditStatus == 1" @click="jumpDetail(item,'cancel')"
												class="mr16" shape="circle" size="mini">取消订单</u-button>
										</template>
										<view class="">
											<u-button @click="jumpDetail(item,'detail')" class="mr16" shape="circle"
												size="mini">查看详情</u-button>
										</view>
									</view>

								</view>
								<u-loadmore :load-text="loadText" style="margin-bottom: 30rpx;" :status="loadStatus"
									v-if="tabs[swiperCurrent].dataSet.length>0">
								</u-loadmore>

							</view>
						</view>
					</scroll-view>

				</swiper-item>
			</swiper>
		</view>
		<u-popup width="580" v-model="refundFlag" mode="center" border-radius="20">
			<view class="wheel-box u-text-center">
				<view class="fs32 fwb mt30 mb30">
					退差价提示
				</view>
				<u-line color="#e5e5e5" />
				<view class="c3 fs30 fwb p020 mt30" style="line-height: 48rpx;">
					当前订单实际金额为 <text style="color: #ef2929;">105.8</text> 元，多支付的
					<text style="color: #ef2929;">5.65</text> 元将会按照支付路径原路返回，同时
					订单会自动完成，确定要操作吗？
				</view>
				<view class="df aic mt30 mb30 jcc w100">
					<u-button @click="refundFlag = false" :hair-line="false" class="mr20"
						:custom-style="{fontSize: '28rpx', color: '#48A147',width: '245rpx', border:'1rpx solid #48A147', height: '68rpx',background: '#fff'}"
						shape='circle' ripple>取消</u-button>
					<u-button @click="refundFlag = false" :hair-line="false" class="" type="primary"
						:custom-style="{fontSize: '28rpx', color: '#ffffff',width: '245rpx', height: '68rpx',background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%)','border':'#47A848'}"
						shape='circle' ripple>好的</u-button>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="delShow" :title-style="{color: 'red'}" content="确认删除该订单吗？" @confirm="delConfirm"
			show-cancel-button ref="uModal" :async-close="true"></u-modal>
		<u-modal v-model="canShow" :title-style="{color: 'red'}" content="确认取消该订单吗？" @confirm="canConfirm"
			show-cancel-button ref="uModal" :async-close="true"></u-modal>
		<u-skeleton :loading="loadingSkeleton" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import Decimal from "decimal.js";
	import {
		shopPurOrderList,
		getInfoOther,
		infoByAreaId,
		shopPurOrderDel,
		shopPurOrderAudit,
		shopPurOrderChangeLogList
	} from '@/api/order.js'
	import {
		shopPurOrderNum
	} from '@/api/common.js'
	import {
		shopAccountDetail
	} from "@/api/address.js"
	export default {
		components: {},
		data() {
			return {
				refundFlag: false,
				canShow: false,
				loadingSkeleton: true,
				delShow: false,
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				customStyle: {
					background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%)',
					color: '#fff',
					border: 'none'
				},
				// evaluate:true,
				storageShow: false,
				title: '',
				orderId: '',
				orderState: "",
				current: 0,
				listQuery: {
					auditStatus: 0,
					pageNum: 1,
					pageSize: 10
				},
				swiperCurrent: 0,
				swiperCurrentname: '全部',
				refresherEnabled: true,
				tabsList: [{
						name: '全部',
						refresherTriggered: false,
					}, {
						name: '待付款',
						refresherTriggered: false,
						count: 0
					}, {
						name: '待配送',
						refresherTriggered: false,
						count: 0
					},
					{
						name: '配送中',
						refresherTriggered: false,
						count: 0
					},
					{
						name: '退款/售后',
						refresherTriggered: false,
						count: 0
					},

				],
				loadStatus: 'loadmore', //加载  loading 加载效果  nomore  没有更多
				// nmrOrderGoods:10,
				tabs: [{
						name: '全部',
						index: 0,
						dataSet: []
					},
					{
						name: '待付款',
						index: 1,
						dataSet: []
					},
					{
						name: '待配送',
						index: 2,
						dataSet: []
					},
					{
						name: '配送中',
						index: 3,
						dataSet: []
					},

					{
						name: '退款/售后',
						index: 4,
						dataSet: []
					},


				],
				loading: false,
				inData: {
					type: null,
					pageNum: 1,
					pageSize: 20
				},

				// 状态(0待付款 3超时未支付 5取消 10接单超时 15拒单 20待接单 30待配送 35配送中 37待备货 40待自取 45已完
				stateColor: {
					'-2': '#999999',
					30: '#47A848',
					20: '#004EFF',
					25: '#004EFF',
					10: '#004EFF',
					1: '#EF2929',
					'-1': '#EF2929',
					'-3': '#EF2929',

				},
				paging: 0,
				tabswitch: 0,
				listIndex: '',
				pagelist: 0,
				refresherTriggered: false,
				itemRow: {},
				scrollHeight: '100vh',
				addressInfo: {}, //地址信息
				addressId: '',
			}
		},
		onShow() {
			this.changeReset()

		},
		onLoad(e) {
			if (e.current) {
				this.current = e.current
				this.swiperCurrent = e.current
				console.log(e.current)
			}

		},
		mounted() {

			let that = this
			uni.getSystemInfo({
				success: function(res) {
					// #ifdef MP-WEIXIN
					that.scrollHeight = res.screenHeight - res.statusBarHeight - uni.upx2px(120) - (
						res.platform == 'ios' ? 44 : 48) - (res.screenHeight - res.safeArea.bottom) + 'px'
					// #endif
					// #ifdef H5
					that.scrollHeight = res.screenHeight - res.statusBarHeight - uni.upx2px(120) - (res
						.screenHeight - res.safeArea.bottom) + 'px'
					// #endif

				}
			});
			uni.$on("handelAddress", async (res) => {
				this.addressInfo = res
				this.infoByAreaId()
			})
		},

		onUnload() {
			uni.$off("handelAddress", () => {});
		},
		methods: {
			calcNum(e) {
				let num = e.reduce((e, c) => {
					return e + c.initSaleNum
				}, 0)
				return num || 0
			},
			shopPurOrderNumFn() {
				shopPurOrderNum().then(res => {
					if (res.code == 200) {
						this.tabsList[1].count = res.data.bIndex1
						this.tabsList[2].count = res.data.bIndex2
						this.tabsList[3].count = res.data.bIndex3
					}
				})
			},
			infoByAreaId() {
				return infoByAreaId({
					areaId: this.addressInfo.areaId
				}).then(res => {
					if (res.code == 200) {
						this.deliveryFee = res.data.sendMoney || 0
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			lookLogistics() {

			},
			getAddressInfo() {
				return shopAccountDetail(this.addressId).then(res => {
					if (res.code == 200) {
						this.addressInfo = res.data
						this.infoByAreaId()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			async handlesubmit(rowData) {
				if (!(this.addressInfo && this.addressInfo.addressId) && this.sendType == 2) {
					uni.showToast({
						title: '请选择地址',
						icon: "none",
					});
					return;
				}
				let priceInfo = {
					platformMoney: rowData.payMoney,
					sendMoney: rowData.sendMoney || 0,
					goodsMoney: rowData.platformMoney || 0,
				}
				uni.redirectTo({
					url: '/pages/confirm/payPage?orderId=' + rowData.shopPurOrderId + '&priceInfo=' + JSON
						.stringify(priceInfo) + '&szbankOpen=' + rowData.szbankOpen
				})
			},
			// 补差价
			async handlesubmitLess(rowData) {
				let priceInfo = {
					platformMoney: rowData.changePlatformMoney,
					sendMoney: 0,
					goodsMoney: rowData.changePlatformMoney || 0,
				}
				uni.redirectTo({
					url: '/pages/confirm/payPage?isLess=true&orderId=' + rowData.shopPurOrderChangeLogId +
						'&priceInfo=' + JSON
						.stringify(priceInfo) + '&szbankOpen=true'
				})
			},

			onreachBottom() {
				console.log('onreachBottom')
				this.listFun()
			},
			refresherrefresh(e) {
				console.log('refresherrefresh', e)
				if (this.refresherFlag || this.loadStatus == 'loading') return
				this.refresherFlag = true
				if (!this.tabs[e].refresherTriggered) this.tabs[e].refresherTriggered = true
				this.changeReset()
			},
			jumpDetail(e, type) {
				console.log(e)
				// return
				this.itemRow = e
				if (type == 'del') {
					this.delShow = true
				} else if (type == 'cancel') {
					this.canShow = true
				} else if (type == 'indexPage') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					if (this.listQuery.bIndex == 4) {
						uni.navigateTo({
							url: `/pages/order/refundDetail?id=${e.shopPurOrderChangeLogId}&type=${e.type}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/order/detail?id=${e.shopPurOrderId}&type=${e.type}&orderPayType=${e.orderPayType}`
						})
					}

				}

			},

			// 取消订单
			canConfirm() {
				shopPurOrderAudit({
					shopPurOrderId: this.itemRow.shopPurOrderId,
					auditStatus: '-1'
				}).then(res => {
					if (res.code == 200) {
						this.canShow = false
						this.$u.toast('操作成功')
						this.tabs[this.swiperCurrent].dataSet = []
						this.loadStatus = 'loadmore'
						this.listQuery.pageNum = 1
						this.listFun()
					} else {
						this.$refs.uModal.clearLoading();
						this.$u.toast(res.msg)
					}
				})
			},
			// 删除订单
			delConfirm() {
				// let id = this.itemRow.type==1?this.itemRow.memberorderd:this.itemRow.orderId
				shopPurOrderDel(this.itemRow.shopPurOrderId).then(res => {
					if (res.code == 200) {
						this.delShow = false
						this.$u.toast('操作成功')
						this.tabs[this.swiperCurrent].dataSet = []
						this.loadStatus = 'loadmore'
						this.listQuery.pageNum = 1
						this.listFun()
					} else {
						this.$refs.uModal.clearLoading();
						this.$u.toast(res.msg)
					}
				})
			},
			// 重置
			changeReset() {
				if (this.loadStatus == 'loading') {
					return
				}
				this.titleOrder = '展开'
				this.loadStatus = 'loadmore'
				this.tabs = [{
							name: '全部',
							bIndex: 0,
							dataSet: []
						},
						{
							name: '待付款',
							bIndex: 1,
							dataSet: []
						},
						{
							name: '待配送',
							bIndex: 2,
							dataSet: []
						},
						{
							name: '配送中',
							bIndex: 3,
							dataSet: []
						},
						{
							name: '退款/售后',
							bIndex: 4,
							dataSet: []
						},

					],
					this.listQuery = {

						pageNum: 1,
						pageSize: 10
					},
					this.listFun()
			},
			tabsChange(index) {
				console.log(index)
				// this.logoShow = true
				this.swiperCurrent = index;
				// setTimeout(()=>{
				// 	this.logoShow = false
				// },500)
			},

			listFun() {
				// 判断 是否有下一页
				if (this.loadStatus === 'nomore' || this.loadStatus == 'loading') {
					return
				}
				this.loadStatus = 'loading' //加载状态
				let that = this
				that.listQuery.bIndex = this.swiperCurrent;
				this.loadingSkeleton = false
				if (that.listQuery.bIndex != 4) {
					shopPurOrderList(that.listQuery).then((res) => {
						this.shopPurOrderNumFn()
						this.logoShow = false
						this.tabs[this.swiperCurrent].refresherTriggered = false
						this.refresherFlag = false
						if (res.code == 200) {
							if (res.rows.length < 10) {
								this.loadStatus = 'nomore' //不用加载下一页
							} else {
								this.loadStatus = 'loadmore'
							}
							// 有数据 页脚就加一
							if (res.rows.length !== 0) {
								this.listQuery.pageNum = Number(this.listQuery.pageNum) + 1
								// console.log(this.listQuery.pageNum)
							}
							this.tabs[this.swiperCurrent].dataSet.push(...res.rows)
							this.loadingSkeleton = false
							console.log(this.tabs)
							// this.$forceUpdate()
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				} else {
					this.getMoreLess()
				}


			},
			getMoreLess() {
				let that = this
				shopPurOrderChangeLogList(that.listQuery).then((res) => {
					this.shopPurOrderNumFn()
					this.logoShow = false
					this.tabs[this.swiperCurrent].refresherTriggered = false
					this.refresherFlag = false
					if (res.code == 200) {
						if (res.rows.length < 10) {
							this.loadStatus = 'nomore' //不用加载下一页
						} else {
							this.loadStatus = 'loadmore'
						}
						// 有数据 页脚就加一
						if (res.rows.length !== 0) {
							this.listQuery.pageNum = Number(this.listQuery.pageNum) + 1
						}
						this.tabs[this.swiperCurrent].dataSet.push(...res.rows)
						this.loadingSkeleton = false
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 滑动tabs 调用接口
			change(e) {
				this.swiperCurrent = e.detail.current
				if (this.swiperCurrent == 4) {
					this.refundFlag = false
				}
				// this.logoShow = true
				this.changeReset()
			},
		},



	}
</script>

<style>
	page {
		background: #f7f8f7;
	}
</style>
<style lang="scss" scoped>
	.desc-dtsb {
		color: #EF2929;
		font-size: 24rpx;
		margin-right: auto;
	}
	
	.desc-dtsb {
		color: #EF2929;
		font-size: 24rpx;
		margin-right: auto;
	}

	.dtsb {
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #EF2929;
		line-height: 32rpx;
		box-sizing: border-box;
		padding: 1rpx 10rpx;
		background: #FFF4F0;
		border-radius: 19rpx;
		border: 2rpx solid #EF2929;
		margin-bottom: 5rpx;
		text-align: center;
		display: inline-block;
		margin-left: 20rpx;
	}

	/* #ifdef APP-PLUS */
	/deep/ uni-button {
		margin-left: 0 !important;
	}

	/* #endif */
	.tag-box {
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #EF2929;
		background: #FFE2E2;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		padding: 2rpx 10rpx;
		display: inline-block;
	}

	.left-box {
		flex-direction: column;
		align-items: flex-end;
		width: 120rpx;
	}

	.priceBox {

		color: #EF2929;

		.price {
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
		}
	}

	.padding-btm {
		/* #ifdef MP-WEIXIN */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
		/*#endif*/
	}

	.store {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
	}

	.state {
		font-size: 26rpx;
		font-weight: 400;
		color: #DC1B24;
		line-height: 30rpx;
	}

	.middle_right {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
	}

	.total {
		font-size: 24rpx;
		color: #DC1B24;
	}

	.btnsale {
		width: 150rpx;
		height: 56rpx;
		border: 1rpx solid #DADADA;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #999999;
		line-height: 30rpx;
	}

	.btnevaluate {
		width: 150rpx;
		height: 56rpx;
		border: 1rpx solid #47A848;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #47A848;
		line-height: 30rpx;
	}

	.specifications {
		/* min-width: 144rpx; */
		/* height: 40rpx; */
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		/* opacity: 0.2; */
	}

	.color {
		color: #DC1B24;
	}

	.code-box {
		width: 32rpx;
		height: 32rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		background: linear-gradient(90deg, #ED272A 0%, #FF7600 100%);
		border-radius: 50%;
		margin: 0 5rpx;
		padding: 10rpx;
		box-sizing: content-box;
	}
</style>